<template>
  <div class="container" id="container">
    <!-- 注册页面 -->
    <div class="form-container sign-up-container">
        <Form action="#" :validation-schema="mySchema" v-slot="{errors}" ref="regCom">
            <h1>注册</h1> <h5>(注册完成后自动登录)</h5>
            <!-- 公共组件 -->
            <!-- <div class="social-container">
              <a href="#"><i class="iconfont iqita">&#xe882;</i></a>
              <a href="#"><i class="iconfont iqita">&#xe883;</i></a>
              <a href="#"><i class="iconfont iqita">&#xe884;</i></a>
            </div> -->
            <input type="text" v-model="regForm.username" placeholder="用户昵称...">
            <Field v-model="regForm.mobile" type="text" name="mobile" placeholder="手机号码..." />
            <div class="errmessage" v-if="errors.mobile"><i class="iconfont errmessage">&#xe66c;</i> {{ errors.mobile }}</div>
            <Field v-model="regForm.password" type="password" name="password" placeholder="密码..." />
            <div class="errmessage" v-if="errors.password"><i class="iconfont errmessage">&#xe66c;</i> {{ errors.password }}</div>
            <button type="button" @click="regSubmit()">提交</button>
        </Form>
    </div>

    <!-- 登录页面 -->
    <div class="form-container sign-in-container">
        <Form :validation-schema="mySchema" v-slot="{errors}" ref="loginCom">
            <h1>登录</h1>
            <!-- 公共组件 -->
            <!-- <div class="social-container">
              <a href="#"><i class="iconfont iqita">&#xe882;</i></a>
              <a href="#"><i class="iconfont iqita">&#xe883;</i></a>
              <a href="#"><i class="iconfont iqita">&#xe884;</i></a>
            </div> -->
            <Field v-model="loginForm.mobile" name="mobile" type="text" placeholder="手机号码..." />
            <div class="errmessage" v-if="errors.mobile"><i class="iconfont errmessage">&#xe66c;</i> {{ errors.mobile }}</div>
            <Field v-model="loginForm.password" name="password" type="password" placeholder="密码..." />
            <div class="errmessage" v-if="errors.password"><i class="iconfont errmessage">&#xe66c;</i> {{ errors.password }}</div>
            <!-- <a href="#" class="forget">忘记密码</a> -->
            <button type="button" @click="loginSubmit()">登录</button>
        </Form>
    </div>

    <!-- 覆盖容器 -->
    <div class="overlay-container">
        <div class="overlay">
            <!-- 覆盖左边 -->
            <div class="overlay-penal overlay-left-container">
                <h1>欢迎回来!</h1>
                <p>
                    为了保持我们之间的联系，请您使用您个人信息注册
                </p>
                <button class="ghost" @click="showSign">返回登录</button>
            </div>
            <!-- 覆盖右边 -->
            <div class="overlay-penal overlay-right-container">
                <h1>你好朋友!</h1>
                <p>
                    使用你注册的手机号登录进入IWORD
                </p>
                <button class="ghost" @click="showReg">前往注册</button>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { userMobileLogin, userMobileReg } from '@/api/user'
import popmessage from '@/components/library/message'
import { Form, Field } from 'vee-validate'
import veeSchema from '@/utils/vee-validate-schema'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'login-form',
  components: {
    Form,
    Field
  },
  setup () {
    // 使用store
    const store = useStore()
    // 使用router
    const router = useRouter()
    // 登录注册表单的切换
    const showSign = () => {
      document.getElementById('container').classList.remove('penal-right-active')
    }
    const showReg = () => {
      document.getElementById('container').classList.add('penal-right-active')
    }
    // 登录表单对象数据
    const loginForm = reactive({
      mobile: null,
      password: null
    })
    // 注册表单数据
    const regForm = reactive({
      username: null,
      mobile: null,
      password: null
    })
    // 校验规则对象
    const mySchema = {
      mobile: veeSchema.mobile,
      password: veeSchema.password
    }
    // 为登录表单绑定ref属性调用实例方法
    const loginCom = ref(null)
    // 为注册表单绑定ref属性调用实例方法
    const regCom = ref(null)
    // 登录按钮绑定事件
    const loginSubmit = () => {
      loginCom.value.validate().then(res => {
        if (res.valid) {
          // console.log('校验通过')
          // popmessage({ type: 'success', str: '校验成功！' })
          userMobileLogin(loginForm).then(res => {
            if (res.data.status === 0) {
              const { id, avatar, username, email, mobile, token, lastword, follow, fans, friends, regday } = res.data.results
              store.commit('user/setUser', { id, avatar, username, email, mobile, token, lastword, follow, fans, friends, regday })
              popmessage({ type: 'success', str: '登录成功' })
              router.push('/')
            } else {
              popmessage({ type: 'error', str: res.data.message })
            }
          }).catch(e => {
            console.log(e)
            popmessage({ type: 'error', str: '登录失败' })
          })
        } else {
          // 表单校验失败拦截
          // console.log('校验失败')
          popmessage({ type: 'error', str: '请填入正确的登录信息' })
        }
      })
    }
    // 为注册按钮绑定事件
    const regSubmit = () => {
      regCom.value.validate().then(res => {
        if (res.valid) {
          // console.log('校验通过')
          userMobileReg(regForm).then(res => {
            if (res.data.status === 0) {
              // 注册成功
              popmessage({ type: 'success', str: res.data.message })
              // 自动登录
              userMobileLogin(regForm).then(res => {
                if (res.data.status === 0) {
                  const { id, avatar, username, email, mobile, token, lastword, follow, fans, friends, regday } = res.data.results
                  store.commit('user/setUser', { id, avatar, username, email, mobile, token, lastword, follow, fans, friends, regday })
                  popmessage({ type: 'success', str: '登录成功' })
                  router.push('/')
                } else {
                  popmessage({ type: 'error', str: res.data.message })
                }
              }).catch(e => {
                console.log(e)
                popmessage({ type: 'error', str: '登录失败' })
              })
            } else {
              // 注册失败
              popmessage({ type: 'error', str: res.data.message })
            }
          }).catch(e => {
            popmessage({ type: 'error', str: e })
          })
        } else {
          // console.log('表单校验失败')
          popmessage({ type: 'error', str: '请填入正确的注册信息' })
        }
      })
    }
    return { showSign, showReg, loginForm, regForm, loginSubmit, regSubmit, loginCom, regCom, mySchema }
  }
}
</script>
<style scoped>
* {
  padding:0;
  margin:0 auto;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F6F5F7;
}
button {
  margin-top: 20px;
  outline: none;
  border: 1px solid #3e87e5;
  border-radius: 20px;
  background-color: #3e87e5;
  padding: 10px 40px;
  font-size: 12px;
  text-transform: uppercase;
  color: white;
  transition: transform 85ms ease-in;
}
h1 {
  text-transform: capitalize;
  font-size: 30px;
}
p{
  margin: 10px 0 30px;
}
button:active {
  transform: scale(.95);
}
.ghost {
  background-color: transparent;
  border-color: white;
}

.container{
  margin-top: 100px;
  position: relative;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
  background-color: white;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
  border-radius: 10px;
  overflow: hidden;
}

.form-container{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 100%;
  width: 50%;
  padding: 0 40px;
  transition: all .65s ease-in-out;
}
.form-container form{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-container input {
  width: 100%;
  height: 40px;
  margin: 8px 0;
  background-color: #EEEEEE;
  border: none;
  font-size: 14px;
  padding: 0 20px;
}
.errmessage /deep/{
  margin-left: 0;
  color: rgb(255, 88, 88);
}
.sign-in-container{
  z-index: 10;
}
.sign-up-container{
  z-index: 5;
}

.social-container {
  display: flex;
}
.social-container a{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  line-height: 40px;
  text-align: center;
  color: #333;
  margin: 20px 8px;
}
.social-container a:hover {
  background-color: #222F3E;
  color: white;
  border-color: #CBCBCC;
}

.iqita{
  font-size: 30px;
}
.overlay-container {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #3e87e5;;
  overflow: hidden;
  transition: transform .65s ease-in-out;
  z-index: 100;
}
.overlay {
  position: absolute;
  display: flex;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, #1a7dff, #ad8fff);
}

.overlay-penal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 0 40px;
  text-align: center;
  color: white;
  font-size: 12px;
}
.forget {
  height: 20px;
  color: #9AA9B7;
  text-decoration: none;
  margin: 5px 0 15px;
  font-size: 12px;
  text-transform: capitalize;
}
.forget:hover {
  border-bottom: 2px tomato solid;
}

.overlay-left-container {
  transform: translateX(10%);
  transition: transform .65s ease-in-out;
}
.overlay-right-container {
  transform: translateX(0);
  transition: transform .65s ease-in-out;
}

.container.penal-right-active .sign-in-container {
  z-index: 5;
  transform: translateX(100%);
}

.container.penal-right-active .sign-up-container {
  z-index: 10;
  transform: translateX(100%);
}

.container.penal-right-active .overlay-container {
  transform: translateX(-100%);
}
.container.penal-right-active .overlay {
  transform: translateX(50%);
}
.container.penal-right-active .overlay-left-container {
  transform: translateX(0);
}
.container.penal-right-active .overlay-right-container {
  transform: translateX(-10%);
}

</style>
